<template>
   <div class="box" ref="dom">
     <div class="box-centers">
        <div class="box-header-four"></div>
        <div class="box-header-five border-bottom">
            <div class="box-header-five-one"><span class="fenlei iconfont">&#xe7f9;</span><p>电台分类</p></div>
            <div class="box-header-five-two"><span class="paihan iconfont">&#xe61b;</span><p>电台排行</p></div>
            <div class="box-header-five-three"><span class="dj iconfont">&#xe691;</span><p>DJ电台</p></div>
            <div class="box-header-five-four"><span class="bin iconfont">&#xe61a;</span><p>小冰分类</p></div>
        </div>
        <div class="box-swiper">
            <swiper :options='swiperOption' class="swiper">
                <swiper-slide><img src="../../../common/img/2.jpg"/></swiper-slide>
                <swiper-slide><img src="../../../common/img/3.jpg"/></swiper-slide>
                <swiper-slide><img src="../../../common/img/4.jpg"/></swiper-slide>
                <swiper-slide><img src="../../../common/img/5.jpg"/></swiper-slide>
                <swiper-slide><img src="../../../common/img/6.jpg"/></swiper-slide>
                  <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
        <div class="gedan">
          <div class="gedan-one">推荐歌单<span class="iconfont gedan-icon">&#xe64a;</span></div>
        </div>
        <div class="gdnr">
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/7.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/8.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/9.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/10.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/11.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
          <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/12.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
           <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/12.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
           <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/12.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
           <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/12.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
           <div class="gdnr-one">
              <div class="gdnr-one-img"><img src="../../../common/img/12.jpg"/></div>
              <div class="gdnr-one-ej iconfont"><span>&#xe654;</span>13亿</div>
              <p class="gdnr-one-zhi">话语新歌榜anfkjanfkanfkan</p>
          </div>
        </div>
      </div>
   </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'tiantai',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 1000
      }
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.dom)
  }
}
</script>

<style lang="stylus" scoped>
 .swiper >>> .swiper-pagination-bullet-active
    background red
 .border-bottom
  &:before
   border-color: #cccccc
.box
 height 10.54rem
 overflow hidden
 .box-header-four
   height 1.5rem
   width 100%
   background-color red
 .box-header-five
   height 3.5rem
   width 100%
   background-color #ffffff
 .box-header-five div
    float left
   .box-header-five-one
    width 1.2rem
    height 1.2rem
    background-color red
    line-height 1.2rem
    text-align center
    border-radius 1.2rem
    margin-right .82rem
    margin-left .12rem
    margin-top 1.35rem
    .fenlei
     font-size .5rem
     color #ffffff
   .box-header-five-two
    width 1.2rem
    height 1.2rem
    background-color red
    line-height 1.2rem
    text-align center
    border-radius 1.2rem
    margin-right .82rem
    margin-top 1.35rem
    .paihan
     font-size .5rem
     color #ffffff
   .box-header-five-three
    width 1.2rem
    height 1.2rem
    background-color red
    line-height 1.2rem
    text-align center
    border-radius 1.2rem
    margin-right .82rem
    margin-top 1.35rem
    .dj
     font-size .5rem
     color #ffffff
   .box-header-five-four
    width 1.2rem
    height 1.2rem
    background-color red
    line-height 1.2rem
    text-align center
    border-radius 1.2rem
    margin-right .12rem
    margin-top 1.35rem
    .bin
     font-size .5rem
     color #ffffff
   .box-header-five p
     font-size .3rem
     margin-top -.3rem
   .swiper img
    width 100%
    height 2.5rem
  .box-swiper
    position absolute
    top 0rem
    left .1rem
    right .1rem
    border-radius .1rem
  .gedan
   height 1rem
   line-height 1.2rem
   background-color #ffffff
   .gedan-one
    font-size .3rem
    font-weight bold
    margin-left .1rem
   .gedan-icon
    margin-left .1rem
 .gdnr
  overflow hidden
  .gdnr-one
   margin-left .1rem
   position relative
   width 2.367rem
   float left
   margin-top .3rem
   .gdnr-one-img
    width 2.3rem
    height 2.3rem
    position relative
   .gdnr-one-img img
    width 100%
    height 100%
    border-radius .2rem
   .gdnr-one-ej
    position absolute
    top .1rem
    right .2rem
    font-size .23rem
    color #ffffff
   .gdnr-one-zhi
    margin-top .2rem
    margin-left .1rem
</style>
